<template>
	<view>
		<view v-if="info.cover"><cover-image style="width: 100%" :src="info.cover" ></cover-image></view>
		<uni-row>
			<uni-col :span="12">
				<view class="price p8">￥{{info.price}} <text>￥{{info.original_price}}</text></view>
			</uni-col>
			<uni-col :span="12" >
				<view class="study"><text>{{info.learns}}人在学</text></view>
			</uni-col>
		</uni-row>
		<uni-section :title="info.title" :sub-title="info.brief" titleFontSize="18px" padding="0 0 5px 10px">
		</uni-section>
		<view class="view-line"></view>
		<view class="course-segmented">
			<uni-segmented-control :current="current" :values="items" styleType="text" activeColor="#FFD101" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0"><rich-text :nodes="info.content"></rich-text></view>
			<view v-if="current === 1">
				<uni-list>
					<uni-list-item v-for="item in info.videos" :key="item.id" :title="item.title" :note="item.created_at+' | 364次学习'" clickable @click="onVideo(item)" :thumb="file_url+item.lock"/>
				</uni-list>
			</view>
			<view v-if="current === 2">
				<uni-list>
					<uni-list-item v-for="item in info.informations" :key="item.id" :title="item.information.title" :note="item.information.click+'次学习'" clickable @click="onInformation(item)" :thumb="file_url+'/config-information.png'"/>
				</uni-list>
			</view>
		</view>
		<view class="fixed-bottom">
			<uni-popup ref="popup" background-color="#fff">
				<view class="pb">
					<uni-card padding="0" spacing="0">
						<template v-slot:cover>
							<view class="p8">
								<uni-title type="h3" :title="'订单：'+info.title"></uni-title>
							</view>
						</template>
						<uni-list>
							<uni-list-item :title="'订单金额：' + info.price"></uni-list-item>
							<uni-list-item :title="'需要支付：' + info.price"></uni-list-item>
						</uni-list>
						<view class="p15">
							<button class="default-button pay-btn" @click="onPay">去支付</button>
						</view>
					</uni-card>
				</view>
			</uni-popup>
			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClickOption" @buttonClick="buttonClick" />
		</view>
		
		<uni-popup ref="popupCustomer" background-color="none">
			<customerVue></customerVue>
		</uni-popup>
	</view>
</template>

<script>
	import customerVue from '../../../components/customer.vue'
	export default {
		components: {
			customerVue
		},
		data() {
			return {
				id:0,
				file_url:'',
				form:{page:1},
				info:{banner:'',title:'',create_time:'',click_um:0,content:'',price:0,original_price:0,order:null},
				
				current: 0,
				items:['详情','目录','资料'],
				
				options: [{
					icon: 'paperplane',
					text: '咨询',
					type:'paperplane',
				}],
				customButtonGroup: [
					{ icon: 'shop',text: '立即订阅', backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)', color: '#333' },
				],
				
				shareinfo:{title:'',img:'',path:''}
			}
		},
		onLoad(options){
			this.id = options.id
			this.file_url = this.$func.fileUrl
			this.onGetInfo()
		},
		methods: {
			onGetInfo(){
				let _this = this
				this.$request_api('applet_api/course/info/'+_this.id,'POST',{}).then(res => {
					// res.data.content = _this.$func.onImgStyle(res.data.content);
					// res.data.content = res.data.content.replace(/\<img/gi, '<img style="width:100%;height:auto"');
					_this.info = res.data
					_this.info.img = _this.info.cover
					if(_this.info.auth){
						_this.customButtonGroup[0].text = '立即学习'
					}
					_this.info.videos.forEach((e) => {
						e.lock = 'course/lock.png'
						if(_this.info.auth == true){
							e.lock = 'course/unlock.png'
						}else{
							e.lock = e.try_see == 1 ? 'course/unlock.png' : 'course/lock.png'
						}
					})
					
					_this.shareinfo.title = _this.info.title
					_this.shareinfo.img = _this.info.cover
				}).catch(err => {
					console.log(err)
				})
			},
			onVideo(data){
				if(data.lock == 'course/lock.png'){
					uni.showToast({ title: '购买课程后可以观看', duration: 2000 }) 
					return
				}
				uni.navigateTo({
					url: "/pages/course/video/video?id="+this.id+"&video_id="+data.id
				});
			},
			onInformation(data){
				uni.navigateTo({
					url: "/pages/information/info/index?id="+data.information_id
				});
			},
			onClickOption(e){
				if(e.content.type == 'paperplane'){
					this.$refs.popupCustomer.open('center')
				}
			},
			buttonClick(e) {
				if(!this.info.auth){
					this.$refs.popup.open('bottom')
					return
				}
				
				uni.navigateTo({
					url: "/pages/course/video/video?id="+this.id+"&video_id="+this.info.videos[0].id
				});
				return;
				
			},
			onPay(){
				let _this = this
				this.$request_api('applet_api/pay','POST',{id:this.id,type:'course'}).then(res => {
					if(res.code != 200){
						uni.showToast({ title: res.msg, duration: 2000 })
						return
					}
					let paymentData = res.data;
					wx.requestPayment({
						nonceStr:paymentData.nonceStr,
						package: paymentData.package,
						paySign: paymentData.paySign,
						timeStamp: paymentData.timeStamp,
						signType:paymentData.signType,
					})
					this.$refs.popup.close()
					_this.isPay(res.no)
				}).catch(err => {
					console.log(err)
				})
			},
			isPay(no){
				let _this = this
				this.$request_api('applet_api/ispay','POST',{no:no}).then(res => {
					if(res.data){
						this.onGetInfo()
						return
					}
					setTimeout(() => {_this.isPay(no)}, 3000);
				}).catch(err => {
					console.log(err)
				})
			},
			onClickItem(e){
				this.current = e.currentIndex
			},
			onLink(url,id){
				uni.navigateTo({
					url: url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.content{padding: 15px 15px 100px 15px;}
.price{font-size: 1.6rem;color: red;}
.study{font-size: .8rem;color: #666;padding: 15px 8px 8px 8px;text-align: right;}
.price text{color: #ccc;font-size: .9rem;display: inline; text-decoration: line-through; text-decoration-color: #CCC; text-decoration-thickness: 1px;}
.course-segmented{width: 300px;}
.fixed-bottom{background-color: #FFF;}
.pay-btn{background-color: linear-gradient(90deg, #FFCD1E, #FF8A18);}
</style>
